<template>
  <van-tab title="预算">
    <div class="tab-inner-wrap"
         ref="wrapper">
      <div class="tab-inner">
        <!-- 骨架屏 -->
        <van-skeleton :row="1"
                      v-for="i in skeletonRepeat"
                      :key="i"
                      :loading="skeletonLoading">
          <list-card v-for="(item,index) in data"
                     :key="index"
                     :title="item.subjectName"
                     rdColor="rgb(102, 102, 102)"
                     :rightDescription="item.totalFee + ' 万元'">
          </list-card>
          <!-- 空状态 -->
          <van-empty description=""
                     v-if="data.length === 0">
            <template #image>
              <div class="empty-image">
                <img src="/images/detail/icon_empty.png" />
              </div>
            </template>
          </van-empty>
        </van-skeleton>

      </div>
    </div>
  </van-tab>
</template>

<script>
import { ref, inject, nextTick } from 'vue'
import usebScroll from '@/hooks/usebScroll'
import ListCard from '@/components/ListCard.vue'
import { getSkeletonInstance } from '@/hooks/useSkeleton'
import { getBudget } from '@/api/request/business'
export default {
  components: {
    ListCard
  },
  setup () {
    const data = ref([])
    const wrapper = ref()
    const $scroll = usebScroll()
    const { skeletonLoading, skeletonRepeat, hideSkeleton, narrowSkeleton } = getSkeletonInstance({ skeletonRepeat: 16 })
    const beanId = inject('beanId')
    const id = inject('id')
    const refresh = (options) => {
      if (data.value.length === 0) {
        getBudget({ id, beanId }).then(response => {
          narrowSkeleton()
          data.value.push(...response.body.data.item)
          hideSkeleton()
          nextTick(() => {
            wrapper.value.style.height = `calc(100vh - ${options.offsetTop})`
            $scroll.initOrRefreshBScroll(wrapper.value)
          })
        })
      }
    }
    return {
      data,
      wrapper,
      refresh,
      skeletonLoading,
      skeletonRepeat
    }
  }
}
</script>

<style scoped>
::v-deep(.van-skeleton__row) {
  width: 94% !important;
  height: 22px !important;
  margin: 0.64rem 0.2667rem 0px 0.2667rem;
}
</style>